import React from 'react';
import { Card } from 'antd';
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

// 模拟数据
const mockData = [
    { name: '1', amount: 5 },
    { name: '2', amount: 15 },
    { name: '3', amount: 10 },
    { name: '4', amount: 12 },
    { name: '5', amount: 14 },
    { name: '6', amount: 10 },
    { name: '7', amount: 8 },
    { name: '8', amount: 16 },
    { name: '9', amount: 12 },
    { name: '10', amount: 6 },
];

const Orders: React.FC = () => {
    return (
        <Card title="累计订单量" size="small" style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '8px 0', flex: 1, display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontSize: '24px', marginBottom: '0' }}>
                    ¥21,539,165
                </div>
                <div style={{ marginBottom: 'auto' }}>
                    <ResponsiveContainer width="100%" height={60}>
                        <AreaChart data={mockData} margin={{ top: 0, right: 5, left: 5, bottom: 10 }}>
                            <XAxis hide={true} />
                            <YAxis hide={true} domain={[0, 'dataMax + 2']} />
                            <Tooltip hide={true} />
                            <Area type="monotone" dataKey="amount" stroke="#a855f7" fill="#a855f7" strokeWidth={2} />
                        </AreaChart>
                    </ResponsiveContainer>
                </div>
                <div style={{ fontSize: '14px', borderTop: '1px solid #e8e8e8', paddingTop: '8px', color: '#999', marginTop: 'auto' }}>
                    昨日销售额<span style={{ fontWeight: 'bold', color: 'black' }}> ¥30,000,000</span>
                </div>
            </div>
        </Card>
    );
};

export default Orders;